<template>
  <div class="main">
    <div :class="{'zhezhao':clear==false}" ref="zhezhao"></div>
    <div class="sug" ref="sug" id="sug">
      <div class="top">注冊協議及隱私政策</div>
      <div class="mtext">
        <b>龍騰代收</b>
        尊重並保護所有使用服務使用者的個人隱私權。為了給您提供更準確、更有個性化的服務，龍騰代收會按照本隱私權政策的規定使用和披露您的個人資訊。但龍騰代收將以高度的勤勉、審慎義務對待這些資訊。除本隱私權政策另有規定外，在未征得您事先許可的情況下，龍騰代收不會將這些資訊對外披露或向協力廠商提供。龍騰代收會不時更新本隱私權政策。 您在同意龍騰代收服務使用協定之時，即視為您已經同意本隱私權政策全部內容。本隱私權政策屬於龍騰代收服務使用協定不可分割的一部分。
        <br />
        <b>1. 適用範圍</b>
        <br />a) 在您註冊龍騰代收帳號時，您根據龍騰代收要求提供的個人註冊資訊；
        <br />b) 在您使用龍騰代收網路服務，或訪問龍騰代收平臺網頁時，龍騰代收自動接收並記錄的您的流覽器和電腦上的資訊，包括但不限於您的IP位址、流覽器的類型、使用的語言、訪問日期和時間、軟硬體特徵資訊及您需求的網頁記錄等資料；
        <br />c) 龍騰代收通過合法途徑從商業夥伴處取得的使用者個人資料。
        <br />您瞭解並同意，以下資訊不適用本隱私權政策：
        <br />a) 您在使用龍騰代收平臺提供的搜索服務時輸入的關鍵字資訊；
        <br />c) 違反法律規定或違反龍騰代收規則行為及龍騰代收已對您採取的措施。
        <br />
        <b>2. 資訊使用</b>
        <br />a) 龍騰代收不會向任何無關協力廠商提供、出售、出租、分享或交易您的個人資訊，除非事先得到您的許可，或該協力廠商和龍騰代收（含龍騰代收關聯公司）單獨或共同為您提供服務，且在該服務結束後，其將被禁止訪問包括其以前能夠訪問的所有這些資料。
        <br />b) 龍騰代收亦不允許任何協力廠商以任何手段收集、編輯、出售或者無償傳播您的個人資訊。任何龍騰代收平臺用戶如從事上述活動，一經發現，龍騰代收有權立即終止與該使用者的服務協定。
        <br />c) 為服務使用者的目的，龍騰代收可能通過使用您的個人信息，向您提供您感興趣的資訊，包括但不限於向您發出到貨通和新聞公告，或者與龍騰代收合作夥伴共用資訊以便他們向您發送有關其產品和服務的資訊（後者需要您的事先同意）。
        <br />
        <b>3. 資訊披露</b>
        <br />在如下情況下，龍騰代收將依據您的個人意願或法律的規定全部或部分的披露您的個人資訊：
        <br />a) 經您事先同意，向協力廠商披露；
        <br />b) 為提供您所要求的產品和服務，而必須和協力廠商分享您的個人資訊；
        <br />c) 根據法律的有關規定，或者行政或司法機構的要求，向協力廠商或者行政、司法機構披露；
        <br />d) 如您出現違反中國有關法律、法規或者龍騰代收服務協定或相關規則的情況，需要向協力廠商披露；
        <br />e) 其它龍騰代收根據法律、法規或者網站政策認為合適的披露。
        <br />
        <b>4. 資訊存儲和交換</b>
        <br />龍騰代收收集的有關您的資訊和資料將保存在龍騰代收及（或）其關聯公司的伺服器上（中國香港伺服器），這些資訊和資料可能傳送至您所在國家、地區或龍騰代收收集資訊和資料所在地的境外並在境外被訪問、存儲和展示。
        <br />
        <b>5. Cookie的使用</b>
        <br />a) 在您未拒絕接受cookies的情況下，龍騰代收會在您的電腦上設定或取用cookies ，以便您能登錄或使用依賴於cookies的龍騰代收平臺服務或功能。龍騰代收使用cookies可為您提供更加周到的個性化服務。
        <br />b) 您有權選擇接受或拒絕接受cookies。您可以通過修改流覽器設置的方式拒絕接受cookies。但如果您選擇拒絕接受cookies，則您可能無法登錄或使用依賴於cookies的龍騰代收網路服務或功能。
        <br />c) 通過龍騰代收所設cookies所取得的有關資訊，將適用本政策。
        <br />
        <b>6. 資訊安全</b>
        <br />a) 龍騰代收帳號均有安全保護功能，請妥善保管您的用戶名及密碼資訊。龍騰代收將通過對使用者密碼進行加密等安全措施確保您的資訊不丟失，不被濫用和變造。儘管有前述安全措施，但同時也請您注意在資訊網路上不存在“完善的安全措施”。
        <br />b) 請您妥善保護自己的個人資訊，僅在必要的情形下向他人提供。如您發現自己的個人資訊洩密，尤其是龍騰代收用戶名及密碼發生洩露，請您立即聯絡龍騰代收客服，以便龍騰代收採取相應措施。
        <br />
      </div>
      <div class="bot">
        點擊同意即表示您已閱讀并同意
        <font color="blue">《龍騰代收用戶注冊協議及隱私政策》。</font>
      </div>
      <div class="bottom">
        <input type="button" @click="jump()" value="不同意" class="disagree" />
        <input type="button" value="同意" class="agree" @click="clickUpDown()" />
      </div>
    </div>
    <div class="title">註冊新的帳戶</div>
    <div class="reg_info">
      <div class="regInfo_wrap">
        <input
          type="text"
          class="ino"
          v-model="mobile"
          placeholder="填寫澳門手機號碼"
          name="mobile"
          value
          maxlength="8"
          ref="mobile"
        />
      </div>
      <div class="regInfo_wrap" style="    margin-bottom: 10px;
    margin-top: 10px;">
        <input
          type="text"
          class="ino"
          v-model="name"
          placeholder="收件人姓名"
          name="mobile"
          value
          maxlength="10"
          ref="realname"
        />
      </div>
      <div class="regInfo_wrap" style="    margin-bottom: 10px;
    margin-top: 10px;">
        <input
          type="text"
          class="ino"
          v-model="password"
          placeholder="请输入6位數字密碼"
          name="mobile"
          value
          maxlength="6"
          ref="password"
        />
      </div>
      <div class="regInfo_wrap" style="    margin-bottom: 10px;
    margin-top: 10px;">
        <input
          type="text"
          class="ino"
          v-model="c_password"
          placeholder="请再次输6位數字密碼"
          name="mobile"
          value
          maxlength="6"
          ref="c_password"
        />
      </div>
      <div class="regInfo_wrap">
        <input
          type="text"
          class="ino"
          v-model="ans"
          placeholder="请输入8位數字安全碼"
          name="mobile"
          value
          maxlength="8"
          ref="ans"
        />
      </div>
      <div
        style="width: 100%; margin-bottom: 10px; margin-top: 10px; text-align: center; display: block;"
      >
        <input type="radio" checked="check" />已閱讀并同意
        <font color="blue" style="font-size:14px" @click="clickUpDown()">《龍騰代收用戶注冊協議及隱私政策》。</font>
      </div>
      <div>
        <img src="img/reg/queding.png" alt style="width: 150px; cursor: pointer;" @click="check()" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mobile: "",
      name: "",
      password: "",
      c_password: "",
      ans: "",
      speed: 100,
      clear: false
    };
  },
  methods: {
    check() {
      var mobile = this.mobile;
      var realname = this.name;
      var password = this.password;
      var c_password = this.c_password;
      var ans = this.ans;
      var r_mobile = this.$refs.mobile;
      var r_realname = this.$refs.realname;
      var r_password = this.$refs.password;
      var r_c_password = this.$refs.c_password;
      var r_ans = this.$refs.ans;
      if (mobile == "") {
        alert("手機號碼不能为空！");
        r_mobile.focus();
        return false;
      }
      var pattern = /6[0-9]{7}/gi;
      if (!pattern.test(mobile)) {
        alert("請輸入6開頭8位數電話號碼！");
        r_mobile.focus();
        return false;
      }
      if (mobile.length > 8) {
        alert("請輸入8位電話號碼！");
        r_mobile.focus();
        return false;
      }

      if (realname == "") {
        alert("請填寫收件人名！");
        r_realname.focus();
        return false;
      }
// if (/[\s><,._\。\[\]\{\}\?\/\+\=\|\'\\\":;\~\!\@\#\*\$\%\^\&`\uff00-\uffff0-9)(]+/.test( realname)){
//         alert("收件人名不能帶空格, 符號及數字");
//         r_realname.focus();
//         return false;
//       }
      if (realname.length < 2) {
        alert("收件人格式不正確！");
        r_realname.focus();
        return false;
      }
      if (realname.length > 10) {
        alert("收件人位数不能大于10！");
        r_realname.focus();
        return false;
      }
      if (password == "") {
        alert("请输入密碼！");
        r_password.focus();
        return false;
      }
      if (password.length != 6) {
        alert("密码必须为6位数字！");
        r_password.focus();
        return false;
      }
      var pattern_p = /[0-9]{6}/gi;
      if (!pattern_p.test(password)) {
        alert("密码必须为6位数字！");
        r_password.focus();
        return false;
      }
      if (c_password == "") {
        alert("请输入確認密码！");
        r_c_password.focus();
        return false;
      }
      if (c_password != password) {
        alert("確認密碼不正确！");
        r_c_password.focus();
        return false;
      }
      if (ans == "") {
        alert("请输入安全碼！");
        r_ans.focus();
        return false;
      }
      if (ans.length != 8) {
        alert("請輸入8位數字安全碼!");
        r_ans.focus();
        return false;
      }

      return true;
    },
    // check() {
    //   this.$refs.c_password.focus();
    // },
    jump() {
      this.$router.push("/reg");
    },
    sureLogin() {
      console.log(this.$refs.zhezhao.style);
    },
    // toggleSlide(){

    //     this.$refs.sug.style.transition='height '+this.speed+'s'
    //     if(this.$refs.sug.style.height==0){
    //         this.$refs.sug.style.display='block'
    //     }
    // },
    clickUpDown() {
      this.clear = false;
      let slide = {
        down: function(div) {
          div.style.height = "330px";
        },
        up: function(div) {
          div.style.height = "0";
        }
      };
      var _this = this;
      function toggleSlide(id, s) {
        var div = document.getElementById(id),
        // 此时自身高度 不包括边框
          div_height = div.offsetHeight;
        div.style.transition = "height " + s + "ms";
        div.style.overflow = "hidden";
        if (div_height) {
          slide.up(div);
        //   div.classList.remove("zhezhao");
          _this.clear = true;
        } else {
          slide.down(div);
        }
      }
      toggleSlide("sug", "300");
      // console.log(this.clear)
    }
  }
};
</script>

<style lang="scss" scoped>
.main{
    position:relative
}
.top {
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-weight: bolder;
}
.bot {
  width: 98%;
  height: 50px;
  text-align: left;
  line-height: 20px;
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 10px;
}
.bottom {
  // position: absolute;
  bottom: 2px;
  height: 35px;
  width: 300px;
  line-height: 20px;
  text-align: center;
  .disagree {
    width: 40%;
    height: 33px;
    font-size: 18px;
    color: #333;
    background-color: #f4f4f4;
    cursor: pointer;
  }
  .agree {
    width: 50%;
    height: 33px;
    font-size: 18px;
    color: white;
    background-color: #ff3300;
    cursor: pointer;
    margin-left: 3px;
  }
}
.sug {
  display: block;
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  top: 30px;
  z-index: 3000;
  background-color: #fff;
  height: 330px;
  width: 300px;
  line-height: 30px;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  // 实现slideup/down 去掉了bottom的absolute 增加了.sug的overflow hidden
}
.mtext {
  width: 98%;
  height: 200px;
  line-height: 20px;
  overflow: hidden;
  overflow-y: auto;
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
}
.zhezhao {
  position: fixed;
  display: block;
  z-index: 2000;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.reg_info {
  text-align: center;
}
.regInfo_wrap {
  width: 100%;
  margin-bottom: 20px;
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
}
.ino {
  height: 30px;
  padding: 2px 5px;
  width: 60%;
  line-height: 30px;
  border: 1px solid #000000;
}
</style>